<template>
	<div>
		<router-view :key="key"></router-view>

		<div class="weui-flex weui-fixed-btm nav">
			<van-tabbar v-model="active" route>
				<van-tabbar-item to="/">
					<span>{{$t('Index.v1')}}</span>
					<img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal">
				</van-tabbar-item>
				<van-tabbar-item to="/Ecology">
					<span>{{$t('Index.v2')}}</span>
					<img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.normal2">
				</van-tabbar-item>
				<van-tabbar-item to="/Assets">
					<span>{{$t('Index.v3')}}</span>
					<img slot="icon" slot-scope="props" :src="props.active ? icon.active4 : icon.normal4">
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	import { mine } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				active: 0,
				personal: [],
				icon: {
					normal: require('./../assets/images/icon-home.png'),
					active: require('./../assets/images/icon-home2.png'),
					normal2: require('./../assets/images/st1.png'),
					active2: require('./../assets/images/st2.png'),
					normal4: require('./../assets/images/icon-my.png'),
					active4: require('./../assets/images/icon-my2.png'),
				}
			}
		},
		beforeCreate() {
			_this = this;
		},
		computed: {
			key() {
				return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
			}
		},
		mounted() {
			if(sessionStorage.token) {
				this.getPer();
				this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
			}
		},
		methods: {
			getPer() { // 获取个人信息
				mine.getPersonal().then(res => {
					this.personal = res.data;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.van-tabbar {
		background: #212636;
	}

	/deep/.van-tabbar-item--active {
		color: #00dd94;
	}

	/deep/.van-hairline--top-bottom::after {
		border-width: 0;
	}

	.vux-1px-t:before {
		border: none;
	}
</style>
